<template>
	<div class="book-info">
		<div class="thumb">
      <img
				class='back' 
        :src="bookInfo.image"
        mode='aspectFill'
			/>
      <img
				class="img"  
        :src="bookInfo.image" 
        mode='aspectFit'
      />
      <div class="info">
        <div class="title">
          {{ bookInfo.title }}
        </div>
        <div class="author">
          {{ bookInfo.author }}
        </div>
      </div>
    </div>
		<div class="detail">
      <img :src="userinfo.image" class='avatar' mode='aspectFit'>
      {{ userinfo.name }}
      <div class="right text-primary">
        {{ bookInfo.rate }}分
				<Rate :value="bookInfo.rate"></Rate>
      </div>
    </div>
		<div class="detail">
      {{ bookInfo.publisher }}
      <div class="right">
        {{ bookInfo.price }}
      </div>
    </div>
		
		<div class="tags">
      <div class="badge" :key='tag' v-for='tag in bookInfo.tags'>{{tag}}</div>
    </div>
    <div class="summary">
      <p :key='i' v-for='(sum, i) in bookInfo.summary'>{{ sum }}</p>
    </div>
	</div>
</template>
<script>
// import Rate from 'vue-tiny-rate'
import Rate from '@/components/rate'

export default {
  name: 'bookInfo',
  props: {
    bookInfo: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    userinfo () {
      return this.bookInfo.user_info || {}
    }
  },
  components: {
    Rate
  }
}
</script>
<style lang="scss" scoped>
	.book-info {
		font-size: 14px;
		.thumb {
			width:750rpx;
    	height:500rpx;
			overflow: hidden;
			position: relative;
			.back {
				filter: blur(15px);
				width:100%;
				height: 100%;
			}
			.img {
				position: absolute;
				width: 100%;
				height: 300rpx;
				left: 0;
				top: 30rpx;
			}
			.info{
				color:white;
				position: absolute;
				width:100%;
				left:0;
				top:330rpx;
				text-align: center;
				.title{
					font-size:20px;
				}
				.author{
					font-size: 14px;
				}
			}
		}
		
		.right{
			float: right;
			// width: 185.31rpx;
		}
		.detail{
			padding:5px 10px;
			.avatar{
				width:20px;
				height:20px;
				border-radius: 50%;
				vertical-align: middle;
			}
		}
		.badge{
			display: inline-block;
			margin:5px;
			padding:5px;
			border-radius: 10px;
			border:1px #EA5A49 solid;
			color:#EA5A49;
		}
		.summary{
			padding:0 15px;
			margin-top:10px;
			p{
				text-indent: 2em;
				font-size: 14px;
			}
		}
	}
</style>
